<template>
  <div class="container">
    <el-card class="account-container">
      <el-form :model="state.form" :rules="state.rules" ref="nameRef"
        label-width="120px" label-position="right"
        class="demo-ruleForm">
        <el-form-item label="登录名：" prop="username">
          <el-input style="width: 200px" v-model="state.form.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="原密码：" prop="password">
          <el-input style="width: 200px" v-model="state.form.password"></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="repassword">
          <el-input style="width: 200px" v-model="state.form.repassword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="submitPass">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { local } from '../utils/storage'
import { AdminSettingRePassword } from "../api/server/admin";
import { ElMessage } from "element-plus";

const nameRef = ref(null)
const state = reactive({
  user: null,
  form: {
    username: '',
    password: '',
    repassword: '',
  },
  rules: {
    username: [
      { required: 'true', message: '登录名不能为空', trigger: ['change'] }
    ],
    password: [
      { required: 'true', message: '原密码不能为空', trigger: ['change'] }
    ],
    repassword: [
      { required: 'true', message: '新密码不能为空', trigger: ['change'] }
    ]
  },
})
onMounted(() => {
  state.user = local.get('ADMIN.USERINFO') || {}
  state.form.username = state.user.username || ''
})
const submitPass = () => {
  nameRef.value.validate((valid) => {
    if (valid) {
      AdminSettingRePassword(state.form).then(() => {
        ElMessage.success('修改成功')
        // window.location.reload()
      })
    }
  })
}

</script>

<style scoped>
.container {
  padding: 25px 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 40px);
  height: 195px;
}

.account-container {
  width: calc(50% - 10px);
}
</style>
